<template>
  <uv-list class="bg-white p-2">
    <!-- 骨架屏 -->
    <view v-if="fetching">
      <uv-skeletons
        v-for="i in 5"
        :key="i"
        :skeleton="skeletonOptions"
        class="mb-4 rounded-lg p-4"
      />
    </view>

    <!-- 律师列表 -->
    <uv-list-item
      v-for="(item, index) in data"
      v-else
      :key="item.id"
    >
      <template #default>
        <view class="mb-4 rounded-lg bg-[#F7F7F7] p-4">
          <view class="flex flex-row gap-4 p-1">
            <!-- 律师头像 + 在线状态 -->
            <view class="flex flex-col items-center justify-center">
              <image
                :src="item.lawyerPhoto"
                class="h-[90rpx] w-[90rpx] rounded-full object-cover"
              />
              <view class="mt-1 flex flex-row items-center gap-1">
                <view class="h-[10rpx] w-[10rpx] rounded-full bg-green-500" />
                <text class="text-[20rpx] text-gray-800 font-400">在线</text>
              </view>
            </view>

            <!-- 律师信息 -->
            <view class="flex flex-1 flex-col justify-between">
              <view class="flex flex-row flex-wrap items-center">
                <text class="text-[32rpx] text-black font-semibold">{{ item.lawyerName }}</text>
                <image class="ml-2 h-[24rpx] w-[24rpx]" src="/static/lawyer/icon_lawyer_renz.png" />
                <image class="ml-2 h-[24rpx] w-[24rpx]" src="/static/lawyer/icon_lawyer_gold.png" />
                <view class="flex-1" />
                <image class="ml-2 h-[24rpx] w-[24rpx]" src="/static/lawyer/icon_lawyer_zhiye.png" />
                <text class="text-[20rpx] text-[#999]">{{ item.workYears }}</text>
              </view>
              <text class="mt-1 text-[20rpx] text-[#666]">{{ item.lawOffice }}</text>
            </view>
          </view>
          <view class="mt-2 flex flex-row items-end justify-between px-1">
            <text class="mr-2 mt-1 basis-2/3 text-[20rpx] text-[#666]">
              擅长：{{ item.lawyerSpecialize || item.tags }}
            </text>
            <!-- 操作按钮 -->
            <view class="flex basis-1/3 flex-row items-center justify-start">
              <!-- 文字咨询按钮 -->
              <view
                class="relative h-[40rpx] w-[40rpx]"
                @tap="onWordConsult(item, index)"
              >
                <!-- 背景图片 -->
                <image
                  src="/static/lawyer/icon_word_ask2_bg.png"
                  class="absolute inset-0 h-full w-full"
                  mode="aspectFit"
                />
                <!-- 图标 -->
                <image
                  src="/static/lawyer/icon_word_ask2.png"
                  class="absolute inset-[5rpx] h-[30rpx] w-[30rpx]"
                  mode="aspectFit"
                />
              </view>

              <!-- 电话咨询按钮 -->
              <view
                class="relative h-[40rpx] flex-1"
                @tap="onPhoneConsult(item)"
              >
                <!-- 背景图片 -->
                <image
                  src="/static/lawyer/icon_phone_ask_bg.png"
                  class="absolute inset-0 h-full w-full"
                  mode="aspectFit"
                />
                <!-- 按钮文字 -->
                <text class="absolute inset-1 flex items-center justify-center text-[20rpx] text-white">
                  电话咨询
                </text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </uv-list-item>

    <!-- 分页控制 -->
    <view class="mt-4 flex flex-row flex-wrap items-center justify-center gap-2">
      <view
        class="rounded-md px-4 py-1 text-[20rpx]"
        :class="[page <= 1 ? 'bg-gray-200 text-gray-400' : 'bg-blue-500 text-white']"
        @tap="page > 1 && emit('prevPage')"
      >
        上一页
      </view>

      <view
        class="rounded-md px-4 py-1 text-[20rpx]"
        :class="[isLastPage ? 'bg-gray-200 text-gray-400' : 'bg-blue-500 text-white']"
        @tap="!isLastPage && emit('nextPage')"
      >
        下一页
      </view>

      <view
        class="rounded-md bg-green-500 px-4 py-1 text-[20rpx] text-white"
        @tap="emit('setPageSize', 20)"
      >
        每页20条
      </view>

      <text class="text-[20rpx] text-gray-500">共{{ pageCount }}页</text>
      <text class="text-[20rpx] text-gray-500">共{{ total }}条</text>
    </view>
  </uv-list>
</template>

<script setup lang="ts">
import type { LawyerDetail } from '@/api/types/home'

const props = defineProps<{
  data: LawyerDetail[]
  page: number
  pageSize: number
  total: number
  pageCount: number
  isLastPage: boolean
  fetching: boolean
  removing: number[]
}>()

const emit = defineEmits<{
  (e: 'wordConsult', lawyer: LawyerDetail): void
  (e: 'phoneConsult', lawyer: LawyerDetail): void
  (e: 'prevPage'): void
  (e: 'nextPage'): void
  (e: 'setPageSize', size: number): void
}>()

function onWordConsult(item: LawyerDetail, index: number) {
  if (!props.removing.includes(index))
    emit('wordConsult', item)
}
function onPhoneConsult(item: LawyerDetail) {
  emit('phoneConsult', item)
}

// UV Skeleton 配置
const skeletonOptions = [
  { type: 'avatar' as const, num: 1, style: 'width:90rpx;height:90rpx;border-radius:50%' },
  { type: 'line' as const, num: 3, style: 'height:20rpx;margin-top:8rpx;width:80%' },
]
</script>
